<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../resource/dhtmlx/form/codebase/suite.css">
    <script src="../../resource/dhtmlx/form/codebase/suite.js"></script>
</head>
<body>
<div style="width: 300px; height: 300px; margin: 0 auto;">
    <div id="form_container"></div>
</div>
<div>
    <button onclick="formControl(true)">禁用</button>
    <button onclick="formControl(false)">解除禁用</button>
    <button onclick="setValueToFormInput('sss')">给第一个输入框设置值</button>
    <button onclick="getValueFromFormInput()">获取第一个输入框值</button>
</div>
<script type="text/javascript">

    var form = new dhx.Form("form_container", {
        css: "dhx_widget--bordered",
        rows: [
            {
                id: "name",
                name: "name",
                type: "input",
                label: "Name",
                icon: "dxi-magnify",
                placeholder: "John Doe"
            },
            {
                id:"email",
                name:"email",
                type: "input",
                label: "Email",
                placeholder: "jd@mail.name"
            },
            {
                type: "checkbox",
                label: "I agree",
                name: "agree",
                labelInline: true,
                id: "agree",
                value: "checkboxvalue",
            },
            {
                type: "combo",
                name: "combo",
                label: "count",
                labelPosition: "left",
                // 控制是否是多选
                multiselection: false,
                // 控制是否显示选中全部
                selectAllButton: false,
                value: [
                    "id_1",
                    "id_2"
                ],
                data: [
                    { value: "11", id: "id_1" },
                    { value: "12", id: "id_2" },
                    { value: "13", id: "id_3" },
                    { value: "14", id: "id_4" },
                    { value: "15", id: "id_5" }
                ]
            },
            {
                type: "button",
                name: "btn1",
                value: "Send",
                size: "medium",
                view: "flat",
                color: "primary"
            }
        ],
        // 控制禁用的属性
        disabled: true
    });

    // 给form中的button绑定事件
    form.getItem("btn1").events.on("Click", function () {
        // 发起ajax请求
        form.send("/test", "POST", true);
    });

    function formControl(disableFlag) {
        if (disableFlag) {
            form.disable();
            return;
        }
        form.enable();
    }

    function setValueToFormInput(value) {
        form.getItem("name").setValue(value);
    }

    function getValueFromFormInput() {
        console.log(form.getItem("name").getValue());
    }

</script>
</body>
</html>